<template>
  <div id="app">
     <transition name="app">
         <router-view></router-view>
     </transition>

      <nav class="mui-bar mui-bar-tab">
          <router-link to="/home" class="mui-tab-item ">
              <span class="mui-icon mui-icon-home"></span>
              <span class="mui-tab-label">首页</span>
          </router-link>
          <router-link class="mui-tab-item" to="/member">
              <span class="mui-icon mui-icon-contact"></span>
              <span class="mui-tab-label">会员</span>
          </router-link>
          <router-link class="mui-tab-item" to="/shopcart">
              <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
                  <span class="mui-badge badge">{{shopcartTotalCount}}</span></span>
              <span class="mui-tab-label">购物车</span>
          </router-link>

          <router-link class="mui-tab-item" to="/search">
              <span class="mui-icon mui-icon-search"></span>
              <span class="mui-tab-label">搜索</span>
          </router-link>
      </nav>
  </div>
</template>
<script>
    export default {
        computed:{
            shopcartTotalCount(){//获取vuex.store中的数据.所有商品数量
                return this.$store.getters.shopcartTotalCount
            }
        }
    }
</script>

<style  lang="scss" >

    #app{
        .app-enter{

            transform: translateX(100%);
        }
        .app-leave-to{

            transform: translateX(-100%);
        }
        .app-enter-active,.app-leave-active{
                position: absolute;
                width: 100%;
                transition: transform .5s ease ;
            }
    }
</style>
